<template>
  <f7-page>
    <f7-navbar  >
      <f7-nav-title>ColorUICss</f7-nav-title>
    </f7-navbar>

    <div class="tien-bar bg-white border-bottom  ">
      <div class='action'>
        <span class='tien-icon-title text-orange '></span> 基础组件
      </div>
    </div>

    <div class="col-3 tien-list grid bg-white ">

      <div v-for="(vo,idx) in baselist" class="tien-item  tien-col" @click="openbase(vo)"  >
        <div :class="'tien-icon-'+vo.icon +' text-'+vo.color " >
          <div v-if="vo.hot" class="tien-tag tien-badge"></div>
        </div>
        <span>{{vo.title}}</span>
      </div>

    </div>

    <div class="tien-bar bg-white border-bottom margin-top ">
      <div class='action'>
        <span class='tien-icon-title text-orange '></span> 扩展组件
      </div>
    </div>

    <div class="col-3 tien-list grid bg-white ">

      <div v-for="(vo,idx) in components" class="tien-item  tien-col" @click="opencomponent(vo)"  >
        <div :class="'tien-icon-'+vo.icon +' text-'+vo.color " >
          <div v-if="vo.hot" class="tien-tag tien-badge"></div>
        </div>
        <span>{{vo.title}}</span>
      </div>

    </div>

    <div class="tien-bar bg-white border-bottom margin-top ">
      <div class='action'>
        <span class='tien-icon-title text-orange '></span> 演示页面
      </div>
    </div>

    

  </f7-page>
</template>
<script>
import '../css/colorui/background.css';
import '../css/colorui/list.css';
import '../css/colorui/button.css';
import '../css/colorui/bar.css';
import '../css/colorui/tag.css';
import '../css/colorui/border.css';
import '../css/colorui/text.css';
import '../css/colorui/nav.css';


export default {
  name:'home',
  data() {
    return {
      components: [
        { title: '操作条', name: 'bar', color: 'purple', icon: 'vipcard' },
        { title: '导航栏 ', name: 'nav', color: 'mauve', icon: 'formfill' },
        { title: '列表', name: 'list', color: 'pink', icon: 'list' },
        { title: '卡片', name: 'card', color: 'brown', icon: 'newsfill' },
        { title: '输入框', name: 'form', color: 'red', icon: 'formfill' },
        { title: '单选复选', name: 'checkbox', color: 'red', icon: 'formfill' },
        { title: '开关', name: 'switch', color: 'orange', icon: 'timefill' },
        { title: '聊天', name: 'chat', color: 'green', icon: 'messagefill' },
        { title: '步骤条', name: 'steps', color: 'cyan', icon: 'roundcheckfill' },
      ],
      baselist: [{
        title: '布局',
        name: 'layout',
        color: 'cyan',
        hot: true,
        icon: 'newsfill'
      },
      {
        title: '背景',
        name: 'background',
        color: 'blue',
        hot: false,
        icon: 'colorlens'
      },
      {
        title: '文本',
        hot: false,
        name: 'text',
        color: 'purple',
        icon: 'font'
      },
      {
        title: '图标 ',
        name: 'icon',
        hot: true,
        color: 'mauve',
        icon: 'icon'
      },
      {
        title: '按钮',
        hot: true,
        name: 'button',
        color: 'pink',
        icon: 'btn'
      },
      {
        title: '标签',
        name: 'tag',
        hot: true,
        color: 'brown',
        icon: 'tagfill'
      },
      {
        title: '头像',
        name: 'avatar',
        hot: true,
        color: 'red',
        icon: 'myfill'
      },
      {
        title: '进度条',
        hot: true,
        name: 'progress',
        color: 'orange',
        icon: 'icloading'
      },
      {
        title: '边框阴影',
        name: 'shadow',
        hot: true,
        color: 'olive',
        icon: 'copy'
      }],
    };
  },
  mounted() {
    
  },
  methods: {
    
    opencomponent:function(vo){
      this.$f7router.navigate('/component/'+vo.name, {
        props: {
          foo: 'bar',
          bar: true,
        }
      })
    },
    openbase:function(vo){
      this.$f7router.navigate('/base/'+vo.name, {
        props: {
          foo: 'bar',
          bar: true,
        }
      })
    }
    
  },
};
</script>
